<!-- 用户评论 -->
 <template>
  <div class="comments-user">
    <h3>用户评论管理</h3>

    <!-- 操作按钮 -->
    <div class="actions">
      <el-button type="primary" @click="refresh">刷新</el-button>
    </div>

    <!-- 筛选查询 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="评论内容">
        <el-input v-model="content" placeholder="请输入评论内容"></el-input>
      </el-form-item>
      <el-form-item label="评论时间">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="评论状态">
        <el-select v-model="status" placeholder="请选择评论状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="待审核" value="pending"></el-option>
          <el-option label="已通过" value="approved"></el-option>
          <el-option label="已驳回" value="rejected"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 评论列表 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="content" label="评论内容" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" label="评论时间" width="180"></el-table-column>
      <el-table-column prop="status" label="评论状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 'approved' ? 'success' : scope.row.status === 'rejected' ? 'danger' : 'info'">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="relatedItem" label="关联项" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button @click="approveComment(scope.row)" type="text" size="small">通过</el-button>
          <el-button @click="rejectComment(scope.row)" type="text" size="small">驳回</el-button>
          <el-button @click="deleteComment(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination layout="prev, pager, next" :total="100" style="margin-top: 20px;"></el-pagination>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const content = ref('');
const dateRange = ref([]);
const status = ref('');
const tableData = ref([
  {
    id: 1,
    content: '这是第一条评论。',
    createTime: '2023-10-01 10:00:00',
    status: 'pending',
    relatedItem: '商品A'
  },
  // 其他评论数据...
]);

const refresh = () => {
  // 刷新逻辑
  ElMessage.success('数据已刷新');
};

const onSubmit = () => {
  console.log('查询条件:', content.value, dateRange.value, status.value);
};

const approveComment = (row) => {
  row.status = 'approved';
  ElMessage.success('评论已通过');
};

const rejectComment = (row) => {
  row.status = 'rejected';
  ElMessage.success('评论已驳回');
};

const deleteComment = (row) => {
  ElMessageBox.confirm(`确定要删除评论《${row.content}》吗？`, '提示').then(() => {
    // 删除逻辑
    ElMessage.success('删除成功');
  });
};
</script>

<style scoped>
.comments-user {
  padding: 20px;
}

.actions {
  margin-bottom: 20px;
}
</style>